<!DOCTYPE html>
<html>
<head>
    <title>node</title>
</head>
<body>
<button onclick="get()">查询</button>

<button onclick="post()">增加用户</button>

<button onclick="del()">删除用户</button>

<button onclick="getnews()">获取新闻</button>

<button onclick="addnews()">增加新闻</button>

<button onclick="updatanews()">修改新闻</button>

<button onclick="delnew()" >删除新闻</button>

<button onclick="adduser()">注册新增用户</button>

<button onclick="userlogin()">用户登录</button>

<form action="http://127.0.0.1:8808/addimg" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" />
</form>


<div class='main'>

    <input type='file' class='filebutton' style='display:none' onchange='fileSelected()' /> <br>
    
    <button class="upload" onclick='openFileDialog()' > 选择文件上传 </button>
    
    <div class="img">
    
    </div>
    
</div>

<!-- <form enctype="multipart/form-data">
    <p>上传csv文件<input type="file" id="csv_file" name="csv_file"/></p>
    <button id="import">导入</button>
</form> -->

<input type="file" oninput="change(event)">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    function get(){
        $.ajax({
            type:'get',
            url:'http://localhost:8808/getindexprcture',

            success:function(data){
                console.log(data);
            },
            error:function(){
                console.log('error');
            }
        })
    }

    function post(){
        $.ajax({
            type:'POST',
            url: 'http://127.0.0.1:8081/adduser',
            data:{
                username:'test',
                password:'123456',
                fullname:'测试'
            },
            success:function (data){
                console.log(data)
            },
            error:function (error){
                console.log(error)
            }
        })
    }

    function del(){
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8081/delUser',
            data:{
                id:'4'
            },
            success:function (success){
                console.log(success)
            },
            erroe:function (error){
                console.log(error)
            }
        })
    }

    function getnews(){
        $.ajax({
            type:'get',
            url:'http://127.0.0.1:8808/getnews?limit=0&size=5',
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", localStorage.getItem('token'));
            },

            success:function(success){
                console.log(success)
            },
            error:function(error){
                console.log(error);
            }

        })
    }

    function addnews(){
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8808/addNews',
            data:{
                title:'模拟标题233',
                content:'<p>模拟标题233</p>',
                modifTime:'2020-10-20 15:33:32',
                auther:'朱朋朋2', 
                releaseTime:'2020-10-20 15:33:32',
                picture:'123456',
                describes:'描述模拟标题2333'
            },
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", localStorage.getItem('token'));
            },
            success:function(success){
                console.log(success);
            },
            error:function(error){
                console.log(error);
            }
        })
    }

    function updatanews(){
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8808/updataNew',
            data:{
                title:'修改标题233',
                content:'<p>修改模拟标题233</p>',
                modifTime:'2020-10-20 15:33:32',
                auther:'修改朱朋朋2',
                releaseTime:'2020-10-20 15:33:32',
                picture:'修改123456',
                describes:'修改描述模拟标题2333',
                id:'6'
            },
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", localStorage.getItem('token'));
            },
            success:function(success){
                console.log(success);
            },
            error:function(error){
                console.log(error);
            }
        })
    }

    function delnew(){
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8808/delNew',
            data:{
                id:'3,4'
            },
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", localStorage.getItem('token'));
            },
            success:function (success){
                console.log(success)
            },
            error:function (error){
                console.log(error)
            }
        })
    }

    function adduser(){
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8808/addUser',
            data:{
                username:'ceshissssssss',
                password: '111111',
                tel:'17681011508'
            },
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", localStorage.getItem('token'));
            },
            success:function (success){
                console.log(success);
            },
            error:function (error){
                console.log(error)
            }
        })
    }

    function userlogin(){
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8808/userLogin',
            data:{
                username:'admin',
                password:'123'
            },
            success:function (success){
                console.log(success)
                localStorage.setItem('token',success.token)
            },
            error:function (error){
                console.log(error)
            }


        })
    }

    // $("#import").click(function () {
    //         var files = $('#csv_file').prop('files');
    //         var data = new FormData();
    //         // data.append('csv_file', files[0]);
    //         // console.log(files);
    //         $.ajax({
    //             type: 'POST',
    //             url: "http://127.0.0.1:8808/addimg",
    //             data: {
    //                 'name': files[0].name,
    //                 'file': files[0]
    //             },
    //             success: function (ret) {
    //                 alert(ret);
    //             }
    //         });
    //     });
        


    function change(a){
        console.log(a.target.files[0]);
        $.ajax({
            type:'POST',
            url:'http://127.0.0.1:8808/addimg',
            data:{
                'name':a.target.files[0].name,
                'file':a.target.files[0]
            }
        })
    }    











    function openFileDialog(){

        $(".filebutton").click();

    }

//选择一个文件时onchange时间被触发

    function fileSelected(){

        var fbutton = $(".filebutton")[0];//dom元素

        //读取文件

        var reader = new FileReader();

        reader.onload = function(e){

            var dataURL = e.target.result;//'...(base64编码)...'

            //alert(data);

            var htmlImg = "<img src = '" + dataURL + "'/>";

            $(".img").html(htmlImg);

        }

        var file = fbutton.files[0];

        reader.readAsDataURL(file);

        startFileUpload(file);

    }

//开始上传

function startFileUpload(file){

        var uploadURL = "http://127.0.0.1:8808/addimg";

        //手工构造一个form对象

        var formData = new FormData();

        formData.append("file" , file);// 'file' 为HTTP Post里的字段名, file 对浏览器里的File对象

        //手工构造一个请求对象，用这个对象发送表单数据

        //设置 progress, load, error, abort 4个事件处理器

        var request = new XMLHttpRequest();

        request.upload.addEventListener("progress" , window.evt_upload_progress , false);

        request.addEventListener("load", window.evt_upload_complete, false);

        request.addEventListener("error", window.evt_upload_failed, false);

        request.addEventListener("abort", window.evt_upload_cancel, false);

        request.open("POST", uploadURL ); // 设置服务URL

        request.send(formData); // 发送表单数据

    }

    window.evt_upload_progress = function(evt){

            if(evt.lengthComputable)

            {

            var progress = Math.round(evt.loaded * 100 / evt.total);

            console.log("上传进度" + progress);

            }

    };

window.evt_upload_complete = function (evt)

{

if(evt.loaded == 0)

{

console.log ("上传失败!");

}

else

{

console.log ("上传完成!");

var response = JSON.parse(evt.target.responseText);

console.log (response);

}

};

window.evt_upload_failed = function (evt)

{

console.log ("上传出错");

};

window.evt_upload_cancel = function (evt)

{

console.log( "上传中止!");

};
</script>
</body>
</html>